<script setup>
  import { reactive, onMounted } from 'vue'
  import { useRouter } from 'vue-router';
  import { datetimeToString, dateIntervalDays } from '@/utils/datetimeUtils'
  import { GetExAccount } from '@/api/exdoctor/account'
  const appRouter = useRouter() // 路由
  const menuData = reactive({
    currentActive: '1-1',
    data: [
      {
        index: '1',
        name: '账户数据分析',
        children: [
          {
            index: '1-1',
            name: '账户综合概览',
            routerName: 'accountOverview',
            routerPath: '/exdoctor/account/overview'
          },
          {
            index: '1-2',
            name: '账户净值分析',
            routerName: 'accountNetvalue',
            routerPath: '/exdoctor/account/netvalue'
          },
          {
            index: '1-3',
            name: '周期盈亏分析',
            routerName: 'accountPeriodProfit',
            routerPath: '/exdoctor/account/periodProfit'
          },
        ]
      },
      {
        index: '2',
        name: '交易统计分析',
        children: [
          {
            index: '2-1',
            name: '平仓盈利与亏损',
            routerName: 'excloseOverview',
            routerPath: '/exdoctor/exclose/overview'
          },
          {
            index: '2-2',
            name: '多空盈亏分析',
            routerName: 'excloseBsprofit',
            routerPath: '/exdoctor/exclose/bsprofit'
          },
          {
            index: '2-3',
            name: '品种盈亏分析',
            routerName: 'excloseVarprofit',
            routerPath: '/exdoctor/exclose/varprofit'
          },
          {
            index: '2-4',
            name: '板块盈亏分析',
            routerName: 'exstatBlockprofit',
            routerPath: '/exdoctor/exstat/blockprofit'
          },
          {
            index: '2-5',
            name: '品种成交结构',
            routerName: 'exstatVarstruct',
            routerPath: '/exdoctor/exstat/varstruct'
          },
          {
            index: '2-6',
            name: '交易周期类型',
            routerName: 'exclosePeriodType',
            routerPath: '/exdoctor/exclose/periodType'
          }
        ]
      },
      {
        index: '3',
        name: '交易综合评价',
        children: [
          {
            index: '3-1',
            name: '账户综合评分',
            routerName: 'mixevaluateRadar',
            routerPath: '/exdoctor/mixevaluate/radar'
          },
          {
            index: '3-2',
            name: '交易综合分析',
            routerName: 'mixevaluateSynthensize',
            routerPath: '/exdoctor/mixevaluate/synthensize'
          }
        ]
      }
    ]
  })

  const exdata = reactive({
    fundNum: '',
    startDate: null,
    endDate: null,
    disabledEditDate: false,
    isTest: false,
  })

  const startDisabledDate = (dt) => {
    return (dt < exdata.startDate || dt > exdata.endDate)
  }
  const endDisabledDate = (dt) => {
    return (dt < exdata.startDate || dt > exdata.endDate)
  }

  const toDiagnosticAccount = () => {
    appRouter.push({
      query: {
        fn: exdata.fundNum,
        start: datetimeToString(exdata.startDate),
        end: datetimeToString(exdata.endDate),
        _ts: new Date().getTime()
      }
    })
  }

  const menuItemClick = (item) => {
    if (!item.routerName || !item.routerPath) return
    exdata.disabledEditDate = item.index !== '1-1'
    appRouter.replace({
      name: item.routerName,
      path: item.routerPath,
      query: {
        fn: exdata.fundNum,
        start: datetimeToString(exdata.startDate),
        end: datetimeToString(exdata.endDate),
        _ts: new Date().getTime()
      }
    })
  }

  const toExportReport = () => {
    exdata.disabledEditDate = true
    appRouter.replace({
      name: 'synthensizeReport',
      path: '/exdoctor/synthensizeReport',
      query: {
        fn: exdata.fundNum,
        start: datetimeToString(exdata.startDate),
        end: datetimeToString(exdata.endDate),
        _ts: new Date().getTime()
      }
    })
  }

  const getAccountInfo = () => {
    exdata.startDate = new Date(dateIntervalDays(new Date(), -90))
    exdata.endDate = new Date()
    GetExAccount().then((res) => {
      // console.log(res)
      const accData = res.data
      if (accData.cust_num) {
        exdata.fundNum = accData.cust_num
        exdata.startDate = new Date(accData.start_date)
        exdata.endDate = new Date(accData.end_date)
        exdata.isTest = accData.is_test
        menuItemClick(menuData.data[0].children[0])
      }
    })
  }

  onMounted(() => {
    // menuItemClick(menuData.data[0].children[0])
    getAccountInfo()
  })

</script>
<template>
  <div class="page-container">
    <!-- 菜单 -->
    <div class="menu-box">
      <el-scrollbar>
        <el-menu
          unique-opened
          class="menu-view"
          :default-active="menuData.currentActive"
        >
          <el-sub-menu v-for="m in menuData.data" :key="m.index" :index="m.index">
            <template #title>{{ m.name }}</template>
            <el-menu-item
              v-for="cm in m.children"
              :key="cm.index"
              :index="cm.index"
              :disabled="exdata.fundNum.length<1"
              @click="menuItemClick(cm)"
            >
              {{ cm.name }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="9" @click="toExportReport">
            综合诊断报告
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </div>
    <!-- 页面 -->
    <div class="right-view">
      <div class="actions-head">
        <div class="logo-name">欢迎使用交易诊断系统</div>
        <div class="fund-num">{{ exdata.fundNum }}</div>
        <div v-show="exdata.isTest" class="fund-test">(模拟数据)</div>
        <div v-show="!exdata.disabledEditDate" class="ex-date">
          <el-space>
            <div>开始日期</div>
            <el-date-picker
              v-model="exdata.startDate"
              :clearable="false"
              :disabled="exdata.disabledEditDate"
              :disabled-date="startDisabledDate"
            />
            <div>结束日期</div>
            <el-date-picker
              v-model="exdata.endDate"
              :clearable="false"
              :disabled="exdata.disabledEditDate"
              :disabled-date="endDisabledDate"
            />
            <el-button
              type="primary"
              :disabled="exdata.disabledEditDate"
              @click="toDiagnosticAccount"
            >
              确定
            </el-button>
          </el-space>
        </div>
      </div>
      <div class="view-page">
        <el-scrollbar>
          <div>
            <RouterView />
          </div> 
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .page-container {
    width: $content-width;
    height: calc(100vh - #{$navbar-height});
    display: flex;
    .menu-box {
      height: calc(100vh - #{$navbar-height});
      width: 220px;
      min-width: 220px;
      border-left: 1px solid #eee;
      .menu-view {
        height: calc(100vh - #{$navbar-height});
      }
    }
    .right-view {
      width: calc(#{$content-width} - 222px);
      min-width: calc(#{$content-width} - 222px);
      border-right: 1px solid #eee;
      background-color: #fff;
      .actions-head {
        display: flex;
        align-items: center;
        height: 39px;
        border-bottom: 1px solid #cddbfa;
        padding: 0 10px;
        .logo-name {
          color: $goldenColor;
          font-weight: 600;
        }
        .fund-num {
          font-size: 12px;
          margin-left: 10px;
          position: relative;
          margin-top: 5px;
          color: #409eff;
        }
        .fund-test {
          color: #409eff;
          font-size: 12px;
          position: relative;
        }
        .ex-date {
          display: flex;
          align-items: center;
          margin-left: auto;
        }
      }
      .view-page {
        height: calc(100vh - #{$navbar-height} - 40px);
      }

    }
  }
</style>